<template>
  <div class="app-container">
      <!-- 查询 -->
      <div class="filter-container" style="padding: 10px;">
        <el-form :inline="true" class="search-form" label-width="100px">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item label="名称：" style="margin: 5px 0">
                <el-input
                  v-model="searchForm.CouponName"
                  placeholder="请输入优惠券名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="类型：" style="margin: 5px 0">
                <el-select
                  v-model="searchForm.type"
                  placeholder="请选择优惠券类型"
                  clearable
                >
                  <el-option
                    v-for="item in [
                      { value: 1, label: '满减券' },
                      { value: 2, label: '折扣券' },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="领取方式：" v-if="searchDisplay" style="margin: 5px 0">
                <el-select
                  v-model="searchForm.get_way"
                  placeholder="请选择领取方式"
                  clearable
                >
                  <el-option
                    v-for="item in [
                      { value: 1, label: '手动领取' },
                      { value: 2, label: '后台发放' },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态：" v-if="searchDisplay" style="margin: 5px 0">
                <el-select
                  v-model="searchForm.status"
                  placeholder="请选择优惠券状态"
                  clearable
                >
                  <el-option
                    v-for="item in [
                      { value: 1, label: '上架' },
                      { value: 2, label: '下架' },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  size="small"
                  type="primary"
                  @click="getListWay"
                  >查询</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="small"
                  type="primary"
                  @click="resettingWay"
                  >重置</el-button
                >
                <el-button
                  v-if="!searchDisplay"
                  type="warning"
                  icon="el-icon-caret-bottom"
                  @click="searchDisplay = true"
                  >展开</el-button
                >
                <el-button
                  v-else
                  type="warning"
                  icon="el-icon-caret-top"
                  @click="searchDisplay = false"
                  >收起</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <el-divider></el-divider>
    <div class="grouping" style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="SaveCouponDialogWay"
            >添加优惠券</el-button
          >
        </el-col>
        <el-col :span="8" style="float: right">
          <div class="right-panel el-button-group">
            <el-button
              class=""
              icon="el-icon-refresh"
              size="mini"
              @click="resettingWay"
            ></el-button>
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button
                  class=""
                  icon="el-icon-s-operation"
                  size="mini"
                ></el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <el-col class="marginTop">
          <el-table
            v-loading="loading"
            highlight-current-row
            :data="CouponList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
          >
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row[fruit] }}
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 1">满减劵</span>
                <span v-else>折扣劵</span>
              </template>
            </el-table-column>
            <el-table-column prop="get_way" label="领取方式" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.get_way == 1"
                  >手动领取</span>
                <span v-else>后台发放</span>
              </template>
            </el-table-column>
            <el-table-column prop="use_type" label="适用类型" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.use_type == 1" style="color: #0076f6;">通用劵</span>
                <span v-if="scope.row.use_type == 2">指定分类</span>
                <span v-if="scope.row.use_type == 3">指定品牌</span>
                <span v-if="scope.row.use_type == 4">指定商品</span>
              </template>
            </el-table-column>
            <el-table-column prop="is_limit" label="是否限量" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.is_limit == 2" size="mini"
                  >不限量</span>
                <span
                  v-if="scope.row.is_limit == 1">{{ scope.row.coupon_limit }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="use_shop" label="适用门店" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.use_shop == 1"
                  >全部门店</span
                >
                <span v-if="scope.row.use_shop == 2"
                  >部分门店</span
                >
                <span v-if="scope.row.use_shop == 3"
                  >仅平台使用</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                <span style="color: #13ce66;" v-if="scope.row.status == 2"
                  >进行中</span
                >
                <span style="color: #13ce66;" v-else-if="scope.row.status == 1"
                  >已开启</span
                >
                <span style="color: #ff4949;" v-else-if="scope.row.status == 3"
                  >已关闭</span
                >
                <span style="color: #ff4949;" v-else>已过期</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              width="180"
              prop="address"
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  style="margin: 5px"
                  v-if="scope.row.status == 2 || scope.row.status == 1"
                  type="warning"
                  size="mini"
                  @click="saveStatus(scope.row)"
                >
                  下架
                </el-button>
                <el-button
                  v-if="scope.row.status == 3"
                  style="margin: 5px"
                  type="danger"
                  size="mini"
                  @click="saveStatus(scope.row)"
                >
                  上架
                </el-button>
                <el-button
                  v-if="scope.row.status !== -1"
                  style="margin: 5px"
                  type="primary"
                  size="mini"
                  @click="editCoupon(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  style="margin: 5px"
                  type="primary"
                  size="mini"
                  @click="dialogReceiveWay(scope.row)"
                >
                  领取明细
                </el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="deleteCoupon(scope.row)"
                >
                  <el-button
                    style="margin: 5px"
                    type="danger"
                    size="mini"
                    slot="reference"
                  >
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col class="marginTop" style="text-align: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="searchForm.count"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="" size="65%" :withHeader="false"
      :visible.sync="SaveCouponDialog" @close="SaveCouponDialogClose" :show-close="true">
      <div class="drawerTitle" style="margin-bottom:20px;">
        <span>优惠券设置</span>
        <div class="close" @click="SaveCouponDialogClose">
          <i class="el-icon-close" style="font-size: 24px;"></i>
        </div>
      </div>
       <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 150px)">
    <!-- <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="SaveCouponDialog"
      width="900px"
      @close="SaveCouponDialogClose"
    > -->
      <el-row v-loading="ruleFormLoading">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-col :span="24">
            <el-form-item label="类型" prop="type">
              <el-radio size="mini" v-model="ruleForm.type" :label="1" border
                >满减劵</el-radio
              >
              <el-radio size="mini" v-model="ruleForm.type" :label="2" border
                >折扣劵</el-radio
              >
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="名称" prop="name">
              <el-input
                type="text"
                placeholder="请输入优惠券名称"
                maxlength="20"
                show-word-limit
                v-model="ruleForm.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="面值" prop="quota">
              <el-input
                type="text"
                onkeyup="value=value.replace(/\D/g,'')"
                placeholder="请输入优惠券面值"
                v-model="ruleForm.quota"
              >
                <template slot="append">
                  <el-popover placement="top-start" trigger="hover">
                    <p style="font-size: 12px">
                      当前属于满减券时,输入多少就是多少
                    </p>
                    <p style="font-size: 12px">
                      当前属于折扣券时最大值为100,输入80就是八折
                    </p>
                    <el-button slot="reference" icon="el-icon-info"></el-button>
                  </el-popover>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-col :span="24">
              <el-form-item label="适用类型" prop="use_type" size="mini">
                <el-radio-group
                  @input="use_typeWay"
                  v-model="ruleForm.use_type"
                  size="mini"
                >
                  <el-radio :label="1" border>通用劵</el-radio>
                  <el-radio :label="2" border>指定分类</el-radio>
                  <el-radio :label="3" border disabled>指定品牌</el-radio>
                  <el-radio :label="4" border>指定商品</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="22" v-show="ruleForm.use_type == 2">
              <el-form-item label="选择分类" prop="use_type_param">
                <el-cascader
                  multiple
                  style="width: 100%"
                  v-model="use_type_param2"
                  :options="CategoryList"
                  :props="{
                    checkStrictly: true,
                    value: 'id',
                    label: 'name',
                    children: 'children',
                  }"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="22" v-show="ruleForm.use_type == 4">
              <el-form-item label="选择商品" prop="use_type_param">
                <el-select
                  @change="elSelectWay"
                  multiple
                  v-model="use_type_param4"
                  style="width: 100%"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="关键字查询支持商品名、ID、副标题、编码"
                  :remote-method="remoteMethodWay"
                  :loading="selectLoading"
                >
                  <el-option
                    v-for="item in goodsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否限量" prop="is_limit">
              <el-radio-group
                @change="radioGroup"
                v-model="ruleForm.is_limit"
                size="mini"
              >
                <el-radio :disabled="ruleForm.get_way == 2" :label="1"
                  >限量</el-radio
                >
                <el-radio :disabled="ruleForm.get_way == 2" :label="2"
                  >不限量</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11" v-show="ruleForm.is_limit == 1">
            <el-form-item label="限量数量" prop="coupon_limit">
              <el-input
                type="number"
                placeholder="请输入限量数量"
                v-model="ruleForm.coupon_limit"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="获取方式" prop="get_way">
              <el-radio-group
                @change="radioGroupGet_way"
                v-model="ruleForm.get_way"
                size="mini"
              >
                <el-radio :label="1">手动领取</el-radio>
                <el-radio :label="2">后台发放</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
                        <el-form-item label="上下架" prop="status">
                            <el-radio size="mini" v-model="ruleForm.status" :label="1">上架</el-radio>
                            <el-radio size="mini" v-model="ruleForm.status" :label="2">下架</el-radio>
                        </el-form-item>
                    </el-col> -->
          <el-col :span="24">
            <el-col :span="24">
              <el-form-item label="适用门店" prop="use_shop" size="mini">
                <el-radio-group
                  @change="radioGroup"
                  v-model="ruleForm.use_shop"
                  size="mini"
                >
                  <el-radio :label="1" border disabled>全部门店</el-radio>
                  <el-radio :label="2" border disabled>部分门店</el-radio>
                  <el-radio :label="3" border>仅平台使用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="22" v-if="ruleForm.use_shop == 2">
                            <el-form-item label="适用门店" prop="use_shop_params">
                                <el-select style="width: 100%;" v-model="ruleForm.use_shop_params" placeholder="请选择">
                                    <el-option v-for="item in [{ value: '1', label: '选择' }]" :key="item.value"
                                        :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col> -->
          </el-col>
          <el-col :span="24">
            <el-col :span="11">
              <el-form-item label="适用门槛" prop="use_doorsill">
                <el-radio-group
                  @change="radioGroup"
                  v-model="ruleForm.use_doorsill"
                  size="mini"
                >
                  <el-radio :label="1">无门槛</el-radio>
                  <el-radio :label="2">有门槛</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-show="ruleForm.use_doorsill == 2">
              <el-form-item label="消费满多少可用" prop="doorsill_price">
                <el-input
                  type="text"
                  @input="radioGroup"
                  placeholder="请输入消费满多少可用"
                  onkeyup="value=value.replace(/\D/g,'')"
                  v-model="ruleForm.doorsill_price"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="11">
              <el-form-item label="使用时间" prop="use_time">
                <el-radio-group
                  @change="radioGroup"
                  v-model="ruleForm.use_time"
                  size="mini"
                >
                  <el-radio :label="1">天数</el-radio>
                  <el-radio :label="2">时间段</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="ruleForm.use_time == 1 ? 11 : 22">
              <el-form-item
                :label="ruleForm.use_time == 1 ? '天数' : '时间段'"
                prop="use_time_value"
              >
                <el-input
                  v-show="ruleForm.use_time == 1"
                  type="number"
                  placeholder="请输入天数"
                  v-model="use_time_value1"
                ></el-input>

                <el-date-picker
                  v-if="ruleForm.use_time !== 1"
                  v-model="use_time_value2"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
                <!-- <el-date-picker v-if="ruleForm.use_time !== 1" v-model="use_time_value2"
                                    value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker> -->
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="11">
              <el-form-item label="领取时间" prop="get_time">
                <el-radio-group
                  @change="radioGroup"
                  v-model="ruleForm.get_time"
                  size="mini"
                >
                  <el-radio :disabled="ruleForm.get_way == 2" :label="1"
                    >限时</el-radio
                  >
                  <el-radio :disabled="ruleForm.get_way == 2" :label="2"
                    >不限时</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="活动说明" prop="explain">
                <el-input
                  style="width: 100%"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入活动说明"
                  v-model="ruleForm.explain"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22" v-show="ruleForm.get_time == 1">
              <el-form-item label="领取时间" prop="get_time_value">
                <el-date-picker
                  v-model="ruleForm.get_time_value"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-col>
        </el-form>
      </el-row>
      </el-scrollbar>
      <div style="text-align: right; padding-right: 30px;">
        <el-button :disabled="saveLoading" @click="SaveCouponDialogClose"
          >取 消</el-button
        >
        <el-button
          v-if="!saveLoading"
          type="primary"
          @click="submitWay('ruleForm')"
          >确 定</el-button
        >
        <el-button v-else type="primary" :loading="saveLoading"
          >加载中</el-button
        >
      </div>
    </el-drawer>

    <!-- 领取明细 -->
    <el-drawer
         :modal-append-to-body="false"
         :append-to-body="true"
         title="领取明细"
         size="50%"
         :withHeader="false"
         :visible.sync="dialogReceive"
         @close="handleReceiveClose"
         :show-close="true"
       >
       <div style="position: relative;margin-bottom: 0px;">
         <div class="drawerTitle">
           <span>领取明细</span>
           <div class="close" @click="handleReceiveClose">
             <i class="el-icon-close" style="font-size: 24px;"></i>
           </div>
         </div>
       </div>
      <el-row v-loading="ReceiveLoading">
        <el-table :data="ReceiveList"
         :header-cell-style="{
           'background-color': '#f3f8fe',
           color: '#606266',
           height: '50px',
         }"
         highlight-current-row
         style="width: 100%">
         <el-table-column prop="user_id" align="center" label="用户ID">
         </el-table-column>
          <el-table-column prop="user_avatar" width="150" align="center" label="头像">
            <template slot-scope="scope">
               <div style="width: 40px; height: 40px;margin: 0 auto;">
                 <el-image v-if="scope.row.user_avatar" :src="scope.row.user_avatar" :preview-src-list="[scope.row.user_avatar]" />
               </div>
          </template>
          </el-table-column>
          <el-table-column prop="user_name" align="center" label="用户名">
          </el-table-column>
          <el-table-column prop="created_at" align="center" label="领取时间">
          </el-table-column>
        </el-table>
        <el-col
          class="marginTop"
          style="text-align: right"
          v-if="totalReceive !== 0"
        >
          <el-pagination
            @size-change="handleReceiveSizeChange"
            @current-change="handleReceiveCurrentChange"
            :current-page="searchReceive.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="searchReceive.count"
            layout="total, prev, pager, next, jumper"
            :total="totalReceive"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import {
  getCouponList,
  SaveCoupon,
  delCoupon,
  getCouponInfo,
  SaveCouponStatus,
  getCouponUserLog,
} from "@/api/coupon/index";
import { getCategoryList, getGoodsList } from "@/api/commodity/index";
const tableTheadOption = {
  id: {
    label: "id",
    field: "id",
  },
  name: {
    label: "名称",
    field: "name",
  },
  quota: {
    label: "面值",
    field: "quota",
  },
  valid_time:{
    label: "到期时间",
    field: "valid_time",
  },
  updated_at: {
    label: "更新时间",
    field: "updated_at",
  },
  created_at: {
    label: "创建时间",
    field: "created_at",
  },
  residue_limit: {
    label: "剩余数量",
    field: "residue_limit",
  },
};
const allTableThead = [
  "id",
  "name",
  "residue_limit",
  "created_at",
  "updated_at",
  "valid_time"
];
const defaultTableThead = ["name","valid_time"];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      reconpunid:{},
      searchDisplay:false,
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchForm: {
        type: "",
        get_way: "",
        status: "",
        CouponName: "",
        page: 1,
        count: 10,
      },
      CategoryList: [],
      CouponList: [],
      total: 0,
      // 添加保存弹框控制器
      SaveCouponDialog: false,
      // 是否提交中
      saveLoading: false,
      // 修改弹框加载
      ruleFormLoading: false,
      // 添加修改标题
      title: "添加优惠券",
      // 添加修改表单参数
      ruleForm: {
        id: "",
        type: 1,
        name: "",
        quota: "",
        use_type: 1,
        use_type_param: [],
        is_limit: 2,
        coupon_limit: "",
        get_way: 1,
        status: 2,
        use_shop: 3,
        use_shop_params: "",
        use_doorsill: 1,
        doorsill_price: "",
        use_time: 1,
        use_time_value: "",
        get_time: 2,
        get_time_value: "",
        explain: "",
      },
      use_type_param4: [],
      use_type_param2: [],
      use_time_value1: "",
      use_time_value2: [],
      // 表单验证
      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const regex = /^[0-9\u4E00-\u9FA5]+$/;
              if (!regex.test(value)) {
                callback(new Error("请输入文字或数字组成的名称"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        quota: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入优惠券面值"));
              } else {
                if (this.ruleForm.type == 2) {
                  if (Number(value) > 100) {
                    callback(new Error("当前类型优惠券面值不能大于100"));
                  } else {
                    callback();
                  }
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        use_type_param: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.ruleForm.use_type == 4) {
                if (this.use_type_param4.length == 0) {
                  callback(new Error("请选择商品"));
                } else {
                  callback();
                }
              } else if (this.ruleForm.use_type == 2) {
                if (this.use_type_param2.length == 0) {
                  callback(new Error("请选择分类"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        coupon_limit: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.ruleForm.is_limit == 1) {
                if (!value) {
                  callback(new Error("请选择"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        doorsill_price: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.ruleForm.use_doorsill == 2) {
                if (value == "") {
                  callback(new Error("请输入消费满多少可用"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        use_time_value: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.ruleForm.use_time == 1) {
                if (this.use_time_value1 == "") {
                  callback(new Error("请输入天数"));
                } else {
                  callback();
                }
              } else {
                if (this.use_time_value2.length == 0) {
                  callback(new Error("请选择时间段"));
                } else {
                  callback();
                }
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        get_time_value: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.ruleForm.get_time == 1) {
                if (!value) {
                  callback(new Error("请选择领取时间段"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      selectLoading: false,
      goodsList: [],
      dialogReceive: false,
      ReceiveList: [],
      ReceiveLoading: false,
      searchReceive: {
        page: 1,
        count: 10,
        CouponId: "",
      },
      totalReceive: 0,
    };
  },
  created() {
    getCategoryList().then((res) => {
      this.CategoryList = res.data;
    });
    this.remoteMethodWay();
    this.getListWay();
  },
  methods: {
    remoteMethodWay(query) {
      this.selectLoading = true;
      getGoodsList({ page: 1, count: 20, keywords: query })
        .then((res) => {
          this.selectLoading = false;
          this.goodsList = res.data.list;
        })
        .catch(() => {
          this.selectLoading = false;
        });
    },
    // 获取优惠券列表
    getListWay() {
      this.loading = true;
      getCouponList(this.searchForm)
        .then((res) => {
          this.CouponList = res.data.list;
          this.total = res.data.total
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 重置搜索条件
    resettingWay() {
      this.searchForm = {
        type: "",
        get_way: "",
        status: "",
        CouponName: "",
        page: 1,
        count: 10,
      };
      this.getListWay()
    },
    elSelectWay(val) {
      console.log(val);
    },
    radioGroup() {
      this.$forceUpdate();
    },
    // 重置表单
    resetFormWay(row) {
      this.ruleForm = {
        id: "",
        type: 1,
        name: "",
        quota: "",
        use_type: 1,
        use_type_param: [],
        is_limit: 2,
        coupon_limit: "",
        get_way: 1,
        status: 2,
        use_shop: 3,
        use_shop_params: "",
        use_doorsill: 1,
        doorsill_price: "",
        use_time: 1,
        use_time_value: "",
        get_time: 2,
        get_time_value: "",
      };
      if (!row) {
        this.$refs.ruleForm.resetFields();
      }
    },
    editCoupon(row) {
      this.resetFormWay(11);
      this.ruleFormLoading = true;
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.SaveCouponDialogWay();
      getCouponInfo({ id: row.id }).then((res) => {
        this.ruleForm.use_doorsill = res.data.CouponRuleInfo.use_doorsill;
        this.ruleForm.use_time = res.data.CouponRuleInfo.use_time;
        this.ruleForm.get_time = res.data.CouponRuleInfo.get_time;
        this.ruleForm.explain = res.data.explain;
        this.ruleForm.doorsill_price = res.data.CouponRuleInfo.doorsill_price
          ? res.data.CouponRuleInfo.doorsill_price
          : 0;
        if (res.data.use_type == 2) {
          this.use_type_param2 = res.data.use_type_array;
        } else {
          this.use_type_param4 = res.data.use_type_array;
        }
        if (res.data.CouponRuleInfo.use_time == 1) {
          this.use_time_value1 = Number(
            res.data.CouponRuleInfo.use_time_start_value
          );
        } else {
          this.use_time_value2 = [
            res.data.CouponRuleInfo.use_time_start_value,
            res.data.CouponRuleInfo.use_time_end_value,
          ];
        }
        if (res.data.CouponRuleInfo.get_time == 1) {
          this.ruleForm.get_time_value = [
            res.data.CouponRuleInfo.get_time_start_value,
            res.data.CouponRuleInfo.get_time_end_value,
          ];
        } else {
          this.ruleForm.get_time_value = [];
        }
        this.ruleFormLoading = false;
        this.$forceUpdate();
      });
    },
    // 删除
    deleteCoupon(row) {
      this.loading = true;
      delCoupon({ couponId: row.id })
        .then(() => {
          this.$messages.success("删除成功");
          this.getListWay();
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    // 打开添加修改弹框
    SaveCouponDialogWay() {
      this.SaveCouponDialog = true;
    },
    // 关闭添加修改优惠券弹框
    SaveCouponDialogClose() {
      this.resetFormWay();
      this.SaveCouponDialog = false;
      this.use_time_value1 = "";
      this.use_type_param4 = [];
      this.use_type_param2 = [];
      this.use_time_value1 = "";
      this.use_time_value2 = [];
    },
    // 选择适用分类时调佣
    use_typeWay(val) {
      this.ruleForm.use_type_param = [];
    },
    // 修改状态
    saveStatus(row) {
      var obj = {
        couponId: row.id,
        status: row.status == 1 ? 2 : 1,
      };
      this.loading = true;
      SaveCouponStatus(obj)
        .then((res) => {
          this.$messages.success("操作成功");
          this.getListWay();
        })
        .catch((err) => {
          this.$messages.error(err.msg);
          this.loading = false;
        });
    },
    // 提交添加修改优惠券
    submitWay(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var obj = JSON.parse(JSON.stringify(this.ruleForm));
          if (obj.use_type == 2) {
            obj.use_type_param = this.use_type_param2.toString();
          } else if (obj.use_type == 4) {
            obj.use_type_param = this.use_type_param4.toString();
          }
          if (obj.use_time == 1) {
            obj.use_time_value = this.use_time_value1;
          } else if (obj.use_time == 2) {
            obj.use_time_value = this.use_time_value2.join("|");
          }
          if (
            obj.get_time_value.length !== 0 &&
            Array.isArray(obj.get_time_value)
          ) {
            obj.get_time_value = obj.get_time_value.join("|");
          } else {
            obj.get_time_value = "";
          }
          if (obj.CouponRuleInfo) {
            delete obj.CouponRuleInfo;
          }
          this.saveLoading = true;
          SaveCoupon(obj)
            .then(() => {
              this.saveLoading = false;
              this.resetFormWay();
              this.getListWay();
              this.SaveCouponDialog = false;
              this.$messages.success("操作成功");
            })
            .catch(() => {
              this.saveLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    // 分页选择调用
    handleSizeChange(val) {
      this.searchForm.count = val;
      this.getListWay();
    },
    // 分页选择调用
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getListWay();
    },
    dialogReceiveWay(row) {
      this.reconpunid = row
      this.searchReceive.CouponId = row.id;
      this.dialogReceive = true;
      this.ReceiveLoading = true;
      getCouponUserLog(this.searchReceive)
        .then((res) => {
          this.ReceiveLoading = false;
          this.ReceiveList = res.data.list;
          this.totalReceive = res.data.total;
        })
        .catch((err) => {
          this.ReceiveLoading = false;
          this.$messages.error(err.msg);
        });
    },
    // 领取详情弹框关闭
    handleReceiveClose() {
      this.dialogReceive = false
      this.ReceiveList = [];
    },
    // 分页选择调用
    handleReceiveSizeChange(val) {
      this.searchReceive.count = val;
      this.dialogReceiveWay(this.reconpunid);
    },
    // 分页选择调用
    handleReceiveCurrentChange(val) {
      this.searchReceive.page = val;
      this.dialogReceiveWay(this.reconpunid);
    },
    radioGroupGet_way() {
      if (this.ruleForm.get_way == 2) {
        this.ruleForm.is_limit = 2;
        this.ruleForm.get_time = 2;
      }
    },
  },
};
</script>

<style>
.el-radio--mini {
  margin-right: 10px !important;
}
</style>
